<template>
  <div class="medication-reminder-page">
    <div class="top">
      <van-icon @click="goback" name="arrow-left" />
      <span style="float:left;margin: auto">用药提醒</span>
    </div>
    <div style="width: 100%; height: auto; background-color: #f6fafc">
      <div
          v-for="(reminder, index) in reminders"
          :key="index"
          class="reminder-item"
      >
        <div class="medication-info" @click="handleReminderItemClick(reminder)" >
          <div class="name">{{ reminder.drugName }}</div>
          <div v-for="(time, timeIndex) in reminder.medicationTime" :key="timeIndex" class="time-label">
            <span :class="['time-tag', timeIndex === 0? 'time-tag-primary' : 'time-tag-secondary']">{{ time }}</span>
          </div>
        </div>
        <div class="detail-info">每次{{reminder.dosage}}{{reminder.unit}}&emsp;|&emsp;{{ reminder.reminderDays }}</div>
        <div class="toggle-switch">
          <van-switch v-model="reminder.isEnabled" @change="updateReminder(reminder)" />
<!--          <van-switch v-model="reminder.isEnabled" @change.stop="(e) => updateReminder(reminder, e)" />-->
        </div>
      </div>
      <button class="add-button" @click="addReminder">+ 新增用药提醒</button>
    </div>
  </div>
</template>

<script>
import { remind } from './remind';
import {Toast} from "vant-green";

export default {
  data() {
    return {
      reminders: []
    };
  },
  mounted() {
    // 从App.vue获取提醒数据，可通过remind实现
    remind.$on('updateReminders', reminders => {
      console.log('Received reminders:', reminders);
      this.reminders = reminders;
    });
  },
  methods: {
    updateReminder(reminder){
      console.log(reminder);
        remind.$emit('updateReminders', this.reminders);
        // 这里可以添加数据持久化逻辑，如保存到本地存储
        localStorage.setItem('reminders', JSON.stringify(this.reminders));
        this.update(reminder)
    },
    goback(){
      this.$router.push({name: 'index'}).then(() => {
        window.location.reload();
      })
    },
    // updateReminder1(reminder,event) {
    //   console.log('Type of newStatus:', typeof event);
    //   console.log('Value of newStatus:', event);
    //   // 这里更新提醒数据后，通过remind通知App.vue更新
    //   remind.$emit('updateReminders', this.reminders);
    //   // 这里可以添加数据持久化逻辑，如保存到本地存储
    //   localStorage.setItem('reminders', JSON.stringify(this.reminders));
    //   console.log(reminder);
    //   this.update(reminder)
    // },
    update(reminders){
      this.axios.put('http://localhost:10086/api/doctor/drug_reminder/update',reminders).then(res => {
        if (res.data.code === 200){
          this.remindAll();
          remind.$emit('updateReminders', this.reminders);
        }else {
          Toast(res.data.message);
        }
      });
    },
    addReminder() {
      this.$router.push({name: 'remindAdd'});
    },
    handleReminderItemClick(reminder){
      this.$router.push({name: 'remindDel', params: {reminder: reminder}});
    },
    remindAll(){
      this.axios.get('http://localhost:10086/api/doctor/drug_reminder/findAll').then(res => {
        if (res.data.code === 200){
          this.reminders = res.data.data;
          localStorage.setItem('reminders', JSON.stringify(this.reminders));
          remind.$emit('updateReminders', this.reminders);
        }
      });
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      }, 666);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
    this.remindAll();

  },

};
</script>

<style scoped>
.medication-reminder-page {
  font-family: Arial, sans-serif;
}
.top {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  width: 100%;
  height: 100px;
  margin-bottom: 50px;
  overflow: hidden;
}
.back-button {
  font-size: 20px;
  cursor: pointer;
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin: auto;
}
.reminder-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  overflow: hidden;
}
.medication-info {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.time-label {
  display: inline-block;
  margin-bottom: 8px;
}
.time-tag {
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 12px;
  margin-top: 5px;
}
.time-tag-primary {
  background-color: #ff9999;
  color: white;
}
.time-tag-secondary {
  background-color: #ccccff;
  color: white;
}
.detail-info {
  font-size: 14px;
  color: #666;
}
.toggle-switch {
  width: 40px;
  height: 20px;
  position: relative;
  margin-right: 40px;
}
.toggle-switch input {
  display: none;
}
.toggle-switch span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 10px;
  transition: 0.4s;
}
.toggle-switch input:checked + span {
  background-color: #007bff;
}
.toggle-switch span::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}
.toggle-switch input:checked + span::before {
  transform: translateX(20px);
}
.add-button {
  display: block;
  width: 90%;
  margin: 80px auto;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  cursor: pointer;
}
</style>